<template>
  <div class="NewsList">
    <!-- <van-nav-bar
      :title="pageTitle"
      left-arrow
      @click-left="backHome"
    />-->
    <nav-bar :title="pageTitle"></nav-bar>
    <div class="NewsList-content">
      <van-tabs
        v-model="selectIndex"
        sticky
        @click="tabsClick"
        color="#0050A5"
        title-active-color="#0050A5"
      >
        <van-tab
          v-for="(tab, tabKey) in tabs"
          title-style="font-size:16x;"
          :key="tabKey"
          :title="tab.title"
        >
          <van-list
            v-model="tab.loading"
            :finished="tab.finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="100"
          >
            <!-- <a href="javascript:;"
              @click="skipRouter({path:'/awardDetail',query:{awardId:item.awardId}})"
              class="NewsList-content-item van-hairline--bottom"
              v-for="(item, index) in tab.list"
              :key="index">
              <div class="news-top">
                <div class="news-top-title van-ellipsis">{{item.title}}</div>
              </div>
              <div class="news-poster">
                <img :src="imgUrl+item.titleImg"  alt="">
              </div>
            </a>-->

            <award-item :list="tab.list"></award-item>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import awardItem from '@/components/award/awardItem'
import navBar from '@/components/NavBar'
export default {
  name: 'awardList',
  components: {
    awardItem,
    navBar,
  },
  data() {
    return {
      imgUrl: config.imgUrl,
      selectIndex: 0,
      pageTitle: '',
      tabs: [
        {
          title: '成果鉴定',
          loading: false,
          finished: false,
          param: {
            page: 0,
            pageSize: 20,
            category: 0,
            awardType: 0,
          },
          list: [],
        },
        {
          title: '作品申报',
          loading: false,
          finished: false,
          param: {
            page: 0,
            pageSize: 20,
            category: 0,
            awardType: 1,
          },
          list: [],
        }
        // ,
        // {
        //   title: '科技奖',
        //   loading: false,
        //   finished: false,
        //   param: {
        //     page: 0,
        //     pageSize: 20,
        //     category: 0,
        //     awardType: 2,
        //   },
        //   list: [],
        // },
      ],
    }
  },
  methods: {
    skipRouter(routerObj) {
      this.$router.push(routerObj)
    },
    backHome() {
      this.$router.back()
    },
    onLoad() {
      this.findList()
    },
    tabsClick(index, title) {
      this.pageTitle = title
    },
    findList() {
      this.tabs[this.selectIndex].param.page++
      this.$request({
        url: '/award/selectAward',
        method: 'post',
        data: this.tabs[this.selectIndex].param,
      }).then((rsp) => {
        if (rsp.code === 200) {
          if (this.tabs[this.selectIndex].param.page === 1) {
            this.tabs[this.selectIndex].list = rsp.data.list
          } else {
            this.tabs[this.selectIndex].list.splice(-1, 0, ...rsp.data.list)
          }

          this.tabs[this.selectIndex].loading = false
          if (this.tabs[this.selectIndex].list.length >= rsp.data.total) {
            this.tabs[this.selectIndex].finished = true
          } else {
            this.tabs[this.selectIndex].finished = false
          }
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
  },
  mounted() {
    const type = this.$route.query.awardType
    this.selectIndex = type
    this.pageTitle = this.tabs[type].title
  },
}
</script>

<style lang='scss'>
@import '../assets/css/base';

.NewsList {
  &-content {
    width: px2rem(690);
    margin: 0 auto;
    overflow: hidden;
    .van-hairline--top-bottom {
      border: none !important;
    }
    // &-item{
    //   display: block;
    //   margin-top: px2rem(40);
    //   padding-bottom: px2rem(30);
    //   .news-top{
    //     width: 100%;
    //     @include flex();
    //     &-title{
    //       width: px2rem(400);
    //       font-size: px2rem(36);
    //       color: #000000;
    //       font-weight: 400;
    //       margin-left: px2rem(20);
    //     }
    //     &>.isTop{
    //       width: px2rem(140);
    //       background: url("../assets/img/news/top.png") left center no-repeat;
    //       background-size: px2rem(15) px2rem(17);
    //       box-sizing: border-box;
    //       padding-left: px2rem(30);
    //       font-size: px2rem(20);
    //       color: #ff0000;
    //     }
    //   }
    //   .news-poster{
    //     margin: px2rem(20) 0;
    //     position: relative;
    //     width: 100%;
    //     &>img{
    //       width: px2rem(690);
    //       // height: px2rem(332);
    //       height: px2rem(479);
    //       border-radius: 5px;
    //       display: block;
    //       object-fit: cover;
    //     }
    //     &-date{
    //       position: absolute;
    //       bottom: 0;
    //       right: 0;
    //       width:px2rem(187);
    //       height:px2rem(35);
    //       background:rgba(0,0,0,0.5);
    //       border-radius:px2rem(10) 0 px2rem(10) 0;
    //       text-align: center;
    //       line-height: px2rem(35);
    //       font-size: px2rem(20);
    //       color: #ffffff;
    //     }
    //   }
    //   .news-content{
    //     width: 100%;
    //     font-size: px2rem(24);
    //     color: #848484;
    //     line-height: 1.7;
    //   }
    // }
  }
}
</style>
